<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <el-card class="card">
      <!-- 第一行 -->
      <div class="first-row">
        <div class="one">订单编号：{{ xrshuju.id }}</div>
        <div class="two">运单编号：{{ xrshuju.memberId }}</div>
        <div class="three">下单时间：{{ xrshuju.createTime }}</div>
        <div class="four">订单状态：{{ xrshuju.status }}</div>
      </div>
      <div>预计到达时间：{{ xrshuju.estimatedArrivalTime }}</div>
    </el-card>
    <!-- 第二行 -->
    <div class="big-box">
      <el-collapse class="collapse">
        <el-collapse-item
          class="collapse-children"
          title="基本信息"
        >
          <div class="collapse-div">
            <h4>发货方</h4>
            <span>发货方姓名：{{ xrshuju.senderName }}</span>
            <span>发货方电话：{{ xrshuju.senderPhone }}</span>
            <br>
            <span>发货方地址：{{ xrshuju.senderProvince.name }}省{{ xrshuju.senderCity.name }}市{{ xrshuju.senderCounty.name }}区</span>
            <span>详细地址：{{ xrshuju.senderAddress }}</span>
            <h4>收货方</h4>
            <span>收货方姓名：{{ xrshuju.receiverName }}</span>
            <span>收货方电话：{{ xrshuju.receiverPhone }}</span>
            <br>
            <span>收货方地址：{{ xrshuju.receiverProvince.name }}省{{ xrshuju.receiverCity.name }}市{{ xrshuju.receiverCounty.name }}区</span>
            <span>详细地址：{{ xrshuju.receiverAddress }}</span>
            <h4>距离：{{ xrshuju.distance }}</h4>
            <span>备注：{{ xrshuju.mark }}</span>
          </div>
        </el-collapse-item>
        <el-collapse-item
          class="collapse-children"
          title="订单跟踪"
        >
          <div></div>
        </el-collapse-item>
        <el-collapse-item
          class="collapse-children"
          title="订单轨迹"
        >
          <div></div>
        </el-collapse-item>
        <!-- 取件信息 -->
        <el-collapse-item
          class="collapse-children"
          title="取件信息"
        >
          <div class="second">
            <div class="second-row">
              <div class="one">所在网点：{{ xrshuju.receiverCounty.name }}区营业部</div>
              <div class="two">取件类型：{{ xrshuju.pickupType }}</div>
              <div class="three">作业状态：{{ xrshuju.pickupType }}</div>
              <div class="four">取件快递员：{{ xrshuju.taskPickup.courier.stationName }}</div>
            </div>
            <br>
            <div class="second-row">
              <div class="one">快递员电话：{{ xrshuju.taskPickup.courier.mobile }}</div>
              <div class="two">预计取件时间：{{ xrshuju.taskPickup.estimatedStartTime }}</div>
              <div class="three">取件完成时间：{{ xrshuju.taskPickup.estimatedEndTime }}</div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item
          class="collapse-children"
          title="派送信息"
        >
          <div class="second">
            <div class="second-row">
              <div class="one">所在网点：{{ xrshuju.taskPickup.agency.name }}区营业部</div>
              <div class="two">作业状态：{{ xrshuju.taskPickup.courier.status }}</div>
              <div class="three">派送快递员：{{ xrshuju.taskPickup.courier.name }}</div>
              <div class="four">快递员电话：{{ xrshuju.taskPickup.courier.mobile }}</div>
            </div>
            <br>
            <div class="second-row">
              <div class="two">预计取件时间：{{ xrshuju.taskPickup.estimatedStartTime }}</div>
              <div class="three">取件完成时间：{{ xrshuju.taskPickup.estimatedEndTime }}</div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item
          class="collapse-children"
          title="费用信息"
        >
          <div class="second">
            <div class="second-row">
              <div class="one">运费：{{ xrshuju.receiverCounty.name }}区营业部</div>
              <div class="two">支付方式：{{ xrshuju.pickupType }}</div>
              <div class="three">付款状态：{{ xrshuju.pickupType }}</div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item
          class="collapse-children"
          title="货品信息"
        >
          <div>
            <el-card>
              <template>
                <el-table>
                  <el-table-column label="序号"></el-table-column>
                  <el-table-column label="货品名称"></el-table-column>
                  <el-table-column label="货品类型"></el-table-column>
                  <el-table-column label="重量（千克）"></el-table-column>
                  <el-table-column label="体积（立方）"></el-table-column>
                  <el-table-column label="操作"></el-table-column>
                </el-table>
              </template>
            </el-card>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { orderDetail } from '@/api/order'
export default {
  data() {
    return {
      shujuId: null,
      xrshuju: {}
    }
  },
  created() {
    this.getDetail()
    console.log(this.$route.query)
    console.log('快递信息', this.$route.query)
  },
  methods: {
    async getDetail() {
      this.shujuId = this.$route.query.id
      const res = await orderDetail(this.shujuId)
      console.log(res)
      this.xrshuju = res.data
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
.big-box{
  margin-bottom: 50px;
}
.card{
  margin: 15px;
  padding: 10px;
  color: rgb(126, 126, 121);
}
.collapse{
  margin-left: 15px;
  margin-right: 15px;
}
.collapse-div{
  padding-left: 45px;
  span{
  display: inline-block;
  width: 300px;
  }
}
.collapse-children{
  margin-bottom: 15px;
}
.first-row{
  display: flex;
  margin-bottom: 20px;
}
.second{
  margin-top: 20px;
.second-row{
  display: flex;
  margin-left: 45px;
}}
.one{
  width: 25%;
}
.two{
  width: 25%;
}
.three{
  width: 25%;
}
.four{
  width: 25%;
}
</style>

